<template>
  <div class="history-data">
    <div class="content-left">
      <div class="left-item">
        <div class="title-font">导入未来气象数据</div>
        <div class="import-content">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :limit="1"
            :http-request="uploadFileRequest"
            :data="{ type: 'weather_translate_file' }"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">拖拽文件或 <em>点击这里上传</em></div>
            <!-- <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template> -->
          </el-upload>
        </div>
      </div>
    </div>
    <div class="content-right">
      <div class="chart-content">
        <div class="charts">
          <div class="chart-style">
            <Echarts
              v-if="chartData.xData.length > 0"
              :chartData="chartData"
              :chartId="'warning'"
            ></Echarts>
          </div>
        </div>
      </div>
      <div class="chart-content">
        <div class="table-font">结果展示</div>
        <ElTable
          style="height: 60%"
          :tableData="tableData"
          :tableColumns="tableColumns"
        ></ElTable>
        <ElTable
          style="height: auto;margin-top: 14px;"
          :tableData="tableData2"
          :tableColumns="tableColumns2"
        ></ElTable>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Echarts from "@/components/charts/echarts.vue";
// import Echarts from "./charts.vue";
import ElTable from "@/components/table.vue";
import { prediction, uploadFile } from "@/api/index.js";
import { UploadFilled } from "@element-plus/icons-vue";

const chartData = ref({
  xData: [],
  yData: [],
  name: "",
});
const getPredictionData = () => {
  prediction().then((res) => {
    if (res.code == 200) {
      chartData.value.xData = res.times;
      chartData.value.yData = res.predictions;
      let data = {
        times: res.times,
        predictions: res.predictions,
      };
      detailTable1Data(data, res.times.length);
      detailTable2Data(res.u2q, res.u3q);
    }
  });
};

const uploadFileRequest = (param) => {
  let formData = new FormData();
  formData.append("weatherpre", param.file);
  let params = {
    type: param.data.type,
    formData,
  };
  uploadFile(params).then((res) => {
    if (res.code == 200) {
      ElMessage.success("上传成功");
      getPredictionData();
    }
  });
};

const tableColumns = ref([]);
const tableData = ref([]);
const tableColumns2 = ref([]);
const tableData2 = ref([]);

const detailTable1Data = (data, dataLength) => {
  // 设置表格列
  tableColumns.value = [
    { prop: "times", label: `时间` },
    { prop: "predictions", label: "负载" },
  ];

  // 使用 map 生成表格数据
  tableData.value = Array.from({ length: dataLength }, (_, index) => ({
    times: data.times[index],
    predictions: data.predictions[index],
  }));
};
const detailTable2Data = (u2q,u3q)=>{
  tableColumns2.value = [
    { prop: "u2q", label: `正态重载阈值` },
    { prop: "u3q", label: "正态过载阈值" },
  ];
  tableData2.value = [
    { u2q, u3q},
]

}


onMounted(() => {
  console.log("Component mounted");
  // getChartData();
});
</script>
<style lang="scss" scoped>
@import "@/global.scss";
@import "@/common/table.scss";
.history-data {
  width: 100%;
  height: 100%;
  display: flex;
  .content-left {
    // flex: 1;
    width: vw(400);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #818181;
    border-left: 1px solid #818181;

    .left-item {
      width: 100%;
      box-sizing: border-box;
      padding: 20px;
      border-bottom: 1px solid #818181;
      .import-content {
        width: 100%;
        min-height: vh(200);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .import-button {
        width: vw(240);
      }
    }
    .left-item:last-child {
      border-bottom: 0;
    }
    .title-font {
      font-size: 20px;
      color: #fff;
      font-weight: 500;
      font-family: Georgia, "Times New Roman", Times, serif;
    }
    .model-font {
      font-size: 20px;
      color: #fff;
      font-weight: 500;
      font-family: Georgia, "Times New Roman", Times, serif;
      margin: 20px 0;
    }
  }
  .content-right {
    // flex: 3.5;
    width: calc(100% - vw(400));
    overflow: hidden;
    height: 100%;
    border-right: 1px solid #818181;
    .button-area {
      width: 100%;
      height: vh(80);
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 vw(40);
    }
    .chart-content {
      width: 100%;
      height: calc((100vh - vh(130)) / 2);
      border-top: 1px solid #818181;
      padding: vh(10) vw(20);
      box-sizing: border-box;
    }
    .chart-button {
      min-width: vw(240);
    }
    .chart-top {
      width: 100%;
      height: vh(50);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      font-size: vw(16);
    }
    .choose-date {
      display: flex;
      align-items: center;
      gap: vw(10);
    }
    .chart-style {
      width: 100%;
      height: vh(400);
    }
    .table-font {
      color: aqua;
      font-size: 16px;
      margin-bottom: 14px;
    }
    // .chart-table {
    //   width: calc(100% - vw(10));
    //   height: 80%;
    // }
    .chart-img {
      // width: vw(900);
      // height: vh(400);
      transform: scale(0.8);
    }
  }
}
:deep(.el-form-item__label) {
  color: #fff;
  font-size: 15px;
}
</style>
